<script>
  // 组件属性
  export let value = 100; // 当前值
  export let maxValue = 100; // 最大值
  export let color = '#ff0000'; // 条的颜色
  export let height = '20px'; // 条的高度
  export let animated = true; // 是否启用动画
  export let showText = true; // 是否显示数值文本
  export let width = 100
  
  // 计算百分比
  $: percentage = Math.min(Math.max((value / maxValue) * 100, 0), 100);
</script>

<div class="bar-container" style="height: {height};width: {width}">
  <div
    class="bar-fill"
    style="
      width: {percentage}%;
      background-color: {color};
      transition: width .3s ease-out;
    "
  />
  {#if showText}
    <div class="bar-text">
      {Math.round(value)}/{maxValue}
    </div>
  {/if}
</div>

<style lang="less">
  .bar-container {
    position: relative;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    overflow: hidden;
  }

  .bar-fill {
    height: 100%;
    border-radius: 4px;
  }

  .bar-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.3em;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    pointer-events: none;
  }
</style>